<script setup lang="ts">
import {useRouter} from 'vue-router'
import {ref} from 'vue'

const router = useRouter()
const avatar = ref([{url: '/api/images/avatar.jpg'},]);
const nickname = ref('Jvyou')
const sex = ref('1')
const birthday = ref('')
const showPicker = ref(false)

// 确认选择日期
const onConfirm = ({selectedValues}: { selectedValues: string[] }) => {
  birthday.value = selectedValues.join('/');
  showPicker.value = false;
};

const onSubmit = () => {
  console.log(avatar.value)
  console.log(nickname.value)
  console.log(sex.value)
  console.log(birthday.value)
  router.push('/personal')
}
</script>

<template>
  <div class="box">
    <van-nav-bar title="编辑个人信息" left-text="返回" left-arrow @click-left="router.push('/personal')"/>

    <van-form @submit="onSubmit">

      <van-field name="avatar" label="头像">
        <template #input>
          <van-uploader v-model="avatar"
                        :max-count="1"
          />
        </template>
      </van-field>

      <van-field v-model="nickname"
                 name="nickname"
                 label="昵称"
                 placeholder="请输入您的昵称"
                 :rules="[{ required: true, message: '请填写昵称' }]"
      />

      <van-field name="sex" label="性别">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="1">男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
          v-model="birthday"
          is-link
          readonly
          name="birthday"
          label="出生日期"
          placeholder="点击您的出生日期"
          @click="showPicker = true"
      />

      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker @confirm="onConfirm" @cancel="showPicker = false"/>
      </van-popup>

      <div style="width: 100%;padding: 0 10px;margin-top: 20px;">
        <VanButton block type="primary" native-type="submit">
          修改
        </VanButton>
      </div>

    </van-form>

  </div>

</template>

<style scoped lang="less">
.box {
  background-color: var(--jvyou-school-background-color);
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}
</style>
